package showcase

import (
	"github.com/templui/templui/internal/components/aspectratio"
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/card"
)

templ CardWithImage() {
	<div class="w-full max-w-sm">
		@card.Card() {
			<div class="overflow-hidden w-full rounded-t-lg">
				@aspectratio.AspectRatio(aspectratio.Props{
					ID:    "top-media-aspect",
					Ratio: aspectratio.RatioVideo,
					Class: "h-full w-full",
				}) {
					<img
						src="/assets/img/card_placeholder.jpeg"
						alt="Card image"
						loading="lazy"
						class="h-full w-full object-cover"
					/>
				}
			</div>
			@card.Header() {
				@card.Title() {
					Featured Card
				}
				@card.Description() {
					With top image
				}
			}
			@card.Content() {
				<p>This card shows top image usage with lazy loading for better performance.</p>
			}
			@card.Footer() {
				@button.Button() {
					Learn more
				}
			}
		}
	</div>
}
